<template>
	<div class="">
		<div class="games-animal">
			<div class="game-wrap">
				<div class="game-type" @click="getGame('S6')" data-name="SV388鬥雞">
					<div class="game-list">
						<div class="gameicon">
							<img src="../../assets/newimg/dongwu1.webp" alt="" />
						</div>
					</div>
				</div>
				<div class="game-type" @click="getGame('CY')" data-name="RCB賽馬">
					<div class="game-list">
						<div class="gameicon">
							<img src="../../assets/newimg/dongwu2.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<loading v-if="isLoadingShow"></loading>
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>
<script>
	import {
		playGame
	} from "../../utils/api.js"
	import loading from '../../components/loading.vue'
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		data() {
			return {
				isLoadingShow: false,
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		components: {
			loading,
			loadingFour
		},
		created() {},
		mounted() {
			// if(localStorage.getItem('show')==1){
			// 	this.isLoadingShow = true
			// 	// window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
			// }
			window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
		},

		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getGame(type) {
				if (!localStorage.getItem('token')) {
					this.$emit('getShowLogin', true)
					return false;
				}
				this.isLoadingShow = true;
				// window.open('http://43.198.233.28/game/playGame?api_code=' + type + '&game_type=OT&token=' + localStorage.getItem('token') + '&game_id=', '_blank')
				let data = {
					api_code: type,
					game_type: 'OT',
					token: localStorage.getItem('token'),
					game_id: '',
				}
				let url = "";
				var wyWindow = "";
				setTimeout(() => {
					wyWindow = window.open(location.href + '?show=1', "_blank");
					// wyWindow = window.open(location.href, "_blank");
				}, 100);
				// localStorage.setItem('show',1)
				playGame(data).then((res) => {
					if (res.status.errorCode == 0) {
						console.log(res.data);
						// this.isLoadingShow = false;
						if (res.url) {
							url = res.url;
							wyWindow.location = url;
							// window.open('https://www.aies.cn/', '_blank')
							// window.open(res.url, '_blank')
						}
					} else if (res.status.errorCode == 401) {
						this.$emit('getTokenNum', false)
						console.log(401);
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
							setTimeout(()=>{
								this.isShowLoadingTeow = false;
							},2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
					// localStorage.removeItem('show')
					setTimeout(() => {
						this.isLoadingShow = false;
					}, 2000);
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
		}
	}
</script>



<style scoped>
	* {
		box-sizing: border-box;
	}

	.games-animal {
		align-items: center;
		background: url('../../assets/newimg/dongwubg.png') 50%/cover no-repeat;
		display: flex;
		height: calc(100vh - 375px);
		justify-content: center;
		min-height: 600px;
		overflow: hidden;
		position: relative;
		width: 100%;
	}

	.games-animal:after {
		background: url('../../assets/newimg/dongwu.webp') 50%/cover no-repeat;
		content: "";
		height: 100%;
		width: 100%;
	}

	.game-wrap {
		align-items: center;
		display: flex;
		bottom: 10px;
		justify-content: center;
		position: absolute;
		width: 600px;
	}

	.game-type {
		align-items: center;
		display: flex;
	}

	.game-list {
		position: relative;
		transition: .3s ease;
	}

	.game-list:hover {
		transform: scale(1.05);
	}

	.gameicon {
		height: 250px;
		margin: 0 5px;
		position: relative;
	}

	.gameicon img {
		display: block;
		max-height: 100%;
	}
</style>